<template lang='pug'>

</template>
<script>
export default {
    name: 'c_pop_billboards',
    data() {
        return {
            viewer:null,
            Cesium:null,
            bid:0,
            gp_billboards:null
        }
    },
    props: {
        arrda: {
            type:Array,
            default:[]
        }
    },
    watch: {
        arrda: {
            handler(){
                if(this.Cesium && this.viewer)this.load()
            }
        },
        deep: true,
    },
    mounted () {
        let t=this
        // t.viewer=t.$parent.viewer
        // t.Cesium=t.$parent.Cesium
        // console.log(t.viewer,t.Cesium)
        // let {Cesium,viewer} =this
        // t.gp_billboards=new Cesium.CustomDataSource("billboards")
        // viewer.dataSources.add(t.gp_billboards)
        // t.load()
        t.$nextTick(()=>{
            t.viewer=t.$parent.viewer
            t.Cesium=t.$parent.Cesium
            let {Cesium,viewer} =this
            t.gp_billboards=new Cesium.CustomDataSource("billboards")
            viewer.dataSources.add(t.gp_billboards)
            t.load()
        })

    },
    methods:{
        load() {
            let t=this
            let {Cesium,viewer} =this   
            t.gp_billboards.entities.removeAll()
            t.arrda.forEach(opt => {
                let llh=opt.llh
                t.gp_billboards.entities.add({
                    inf:opt,
                    type:'billboard',
                    bid:t.bid++,
                    nam:opt.nam||'billboard',
                    position: Cesium.Cartesian3.fromDegrees(llh.lon,llh.lat,llh.hei),
                    billboard:{
                        image: opt.image || './billboard.png',
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        scale:opt.scale || 1,
                    }
                })
            });
        }
    }

}
</script>